<template>
  <div>
    <!-- 头部 -->
    <el-row
      type="flex"
      justify="space-between"
      class="header"
    >
      <el-col
        :span="5"
        class="info"
      >说明: 目前支持学科和关键字条件筛选</el-col>
      <el-col :span="2">
        <el-button
          icon="el-icon-edit"
          style="float:right"
          type="success"
          @click="$router.push('/questions/new')"
        >新增按钮</el-button>
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-row>
      <!-- 搜索下拉框 -->
      <!-- 第一行 -->
      <el-row
        class="search one"
        type="flex"
        justify="left"
      >
        <el-col>
          <span class="title">学科</span>
          <el-select
            v-model="params.subjectID"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              v-for="(item,index) in  subList"
              :key="index"
              :value="item.value"
              :label="item.label"
            > {{item.label}}</el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">二级目录</span>
          <el-select
            v-model="params.catalogID"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              :value="item.catalogID"
              v-for="item in tableOfContents"
              :key="item.id"
              :label="item.catalogID"
            > </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">标签</span>
          <el-select
            v-model="params.tags"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              v-for="(item,index) in  tagsList"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">关键字</span>
          <el-input
            placeholder="根据题干搜索"
            style="width: 200px"
            class="search"
            v-model="params.keyword"
          >
          </el-input>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row
        class="search one"
        type="flex"
      >
        <el-col>
          <span class="title">试题类型</span>
          <el-select
            v-model="params.questionType"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              :value="type.value"
              v-for="type in  questionT"
              :key="type.id"
              :label="type.label"
            ></el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">难度</span>
          <el-select
            v-model="params.difficulty"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              :value="item.value"
              v-for="item in hard"
              :key="item.value"
              :label="item.label"
            > </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">方向</span>
          <el-select
            v-model="params.direction"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              :value="item"
              v-for="(item ,index) in directionList"
              :key="index"
              :label="item"
            > </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span class="title">录入人</span>
          <el-select
            v-model="params.creatorID"
            placeholder="请选择"
            style="width: 200px"
            class="search"
          >
            <el-option
              :value="item.creatorID"
              v-for="item in tableOfContents"
              :key="item.id"
              :label="item.creator"
            > </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row
        class="search"
        type="flex"
      >
        <el-col>
          <span class="title">题目备注</span>
          <el-input
            style="width: 200px"
            class="search"
            v-model="params.remarks"
          >
          </el-input>
        </el-col>
        <el-col>
          <span class="title">企业简称</span>
          <el-input
            style="width: 200px"
            class="search"
          >
          </el-input>
        </el-col>
        <el-col>
          <span class="title">城市</span>
          <!-- 地区 -->
          <el-select
            v-model="params.province"
            placeholder="请选择"
            style="width: 95px"
            class="search"
            @change="choseCity"
          >
            <el-option
              :value="item"
              v-for="(item,index) in provincesList"
              :key="index"
              :label="item"
            > </el-option>
          </el-select>
          <!-- 城市 -->
          <el-select
            v-model="params.city"
            placeholder="请选择"
            style="width: 95px"
            class="search double"
          >
            <el-option
              :value="item"
              :label="item"
              v-for="(item ,index) in citysList"
              :key="index"
            > </el-option>
          </el-select>
        </el-col>
        <el-col>
          <div class="btn">
            <el-button
              plain
              @click="clearFn"
            >清除</el-button>
            <el-button
              type="primary"
              @click="doSearch"
            >搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { list } from '../../api/hmmm/questions'
import { simple as simpleTags } from '../../api/hmmm/tags'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
export default {
  data () {
    return {
      citysList: [], // 城市
      provincesList: provinces(), // 地区
      subList: [], // 学科列表
      tableOfContents: [], // 目录,
      tagsList: [], // 标签列表
      questionT: questionType, // 试题类型
      hard: difficulty, // 难度
      directionList: direction, // 方向
      params: {
        catalogID: '', // 二级目录
        subjectID: '', // 学科
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        province: '', // 省份
        city: ''// 城市
      }
    }
  },
  mounted () {
    this.getSublist() // 加载学科列表信息
    this.getdirectorys() // 加载二级目录列表
    this.getTagsList()
  },
  methods: {
    async getSublist () { // 获取学科的简单列表
      const res = await simple()
      this.subList = res.data
    },
    async getdirectorys () { // 简单目录列表
      const res = await list()
      this.tableOfContents = res.data.items
    },
    async getTagsList () {
      const res = await simpleTags()
      this.tagsList = res.data
    },
    getCity () {
      return citys()
    },
    choseCity () { // 地区改变的时候触发城市的变化
      this.citysList = citys(this.params.province)
    },
    clearFn () { // 清除表单操作
      this.params = {}
    },
    doSearch () { // 搜索操作
      this.$emit('search', this.params)
    }

  }
}
</script>

<style lang="scss">
.one{
  margin-bottom: 20px;
}
.search {
  margin-top: 5px;
}

.info {
  font-size: 10px;
  color: #ffd3ed;
}

.title {
  display: inline-block;
  width: 70px;
  text-align: right;
  color: #60627f;
  margin-right: 10px;
  font-weight: 600;
}
.btn {
  margin-top: 5px;
  text-align: right;
  margin-right: 43px;
}
.double {
  margin-left: 10px;
}
</style>
